<!DOCTYPE html>
<html style="height: 100%">
<head>
<meta charset="UTF-8">
<title>正则表达式</title>
<script src="https://cdn.bootcss.com/jquery/3.5.0/jquery.js"></script>
<script src="https://lib.baomitu.com/vue/2.6.12/vue.min.js"></script>
<style type="text/css">
body{
	padding: 10px
}
.res{
	display: inline-block;
	margin : 0px 5px;
	width: 60px;
	height: 20px;
	line-height:20px;
}
input {
	color:blue;
	text-align: center;
	font-size: 1.2em;
	font-weight : bold;
	border-top:none;
	border-left:none;
	border-right:none;
	border-bottom : 1px solid #555;
	background: inherit;
	width:70%
}
.qlist dl{
	padding: 5px;
	border: 1px solid #ccc;
	background: #eee;
	border-radius: 5px;
}
.qlist dl:hover{
	border-color: blue;
}
.qlist{
	overflow: auto; 
}
</style>
<script type="text/javascript">
function Q(content, expect, validate, answer){
	this.content = content;
	this.validate = validate;
	this.expect = expect;
	this.answer = answer;
	this.result = false;
}

var qs = [
	new Q("var data = ['欧阳锋', '慕容复', '杨珂', '欧阳克', '王林奎','慕容翠花','李玲'];<br>// 判断该组字符串中的复姓<br>var arr = [];<br>for(var i in data){<br> var ret = 答题线; <br> arr.push(ret);<br>}<br>arr.toString() ; // 结果返回 ",
			[true, true,false,true,false,true,false],null,'/^(欧阳|慕容).+$/.test(data[i])'),
	new Q("var data = ['123456', '1234567', '12345', '12345A', 'A12345','123+45'];<br>// 判断该组字符串是否是合法的银行卡密码<br>var arr = [];<br>for(var i in data){<br> var ret = 答题线; <br> arr.push(ret);<br>}<br>arr.toString() ; // 结果返回 ",
			[true,false,false,false,false,false],null,'/^\\d{6}$/.test(data[i])'),
	new Q("var data = ['lls@qq.com', 'lls#163.com', 'lls@sina@com', 'llsqqcom', 'lls.qq@com', 'lls@yc.com'];<br>// 判断该组字符串是否是邮箱地址<br>var arr = [];<br>for(var i in data){<br> var ret = 答题线; <br> arr.push(ret);<br>}<br>arr.toString() ; // 结果返回 ",
			[true,false,false,false,false,true],null,'/\\w+@\\w+\\.\\w+/.test(data[i])'),
	new Q("var data = ['13812345678', '1381234567', '138123456789', '138a2345678', '23812345678'];<br>// 判断该组字符串是否是手机号码<br>var arr = [];<br>for(var i in data){<br> var ret = 答题线; <br> arr.push(ret);<br>}<br>arr.toString() ; // 结果返回 ",
			[true,false,false,false,false],null,'/^1\\d{10}$/.test(data[i])'),
	new Q("var data = ['430403198802033031', '43040319880503303X', '43040319880203303Y', '43040319880203303', '4304031988020330305'];<br>// 判断该组字符串是否是身份证号码(18位数字,最后一位是0~9和X或x)<br>var arr = [];<br>for(var i in data){<br> var ret = 答题线; <br> arr.push(ret);<br>}<br>arr.toString() ; // 结果返回 ",
			[true,true,false,false,false],null,'/^\\d{17}[0-9Xx]$/.test(data[i])'),
	new Q("var data = ['306529917', '666666', '03657897', '3065A9987', '4567','78900','78900A'];<br>// 判断该组字符串是否是QQ号码<br>var arr = [];<br>for(var i in data){<br> var ret = 答题线; <br> arr.push(ret);<br>}<br>arr.toString() ; // 结果返回 ",
			[true,true,false,false,false,true,false],null,'/^[1-9][0-9]{4,}$/.test(data[i])'),
	new Q("var data = ['耄耋', '饕餮', '你好SMITH', '你好007', '詹姆斯-邦德','こんにちは'];<br>// 判断该组字符串是否是纯中文, 提示:中文的unicode字符编码访问是: 4e00 ~ 9fa5<br>var arr = [];<br>for(var i in data){<br> var ret = 答题线; <br> arr.push(ret);<br>}<br>arr.toString() ; // 结果返回 ",
			[true,true,false,false,false,false],null,'/^[\\u4e00-\\u9fa5]+$/.test(data[i])'),
	new Q("var data = ['01', '12', '1', '13', '100','20','A@'];<br>// 判断该组字符串是否是2位月份, 格式为：01～09或1～12<br>var arr = [];<br>for(var i in data){<br> var ret = 答题线; <br> arr.push(ret);<br>}<br>arr.toString() ; // 结果返回 ",
			[true,true,true,false,false,false,false],null,'/^(0?[1-9]|1[0-2])$/.test(data[i])'),
	new Q("var data = ['01', '1', '11', '21', '31','32','00','AA','99'];<br>// 判断该组字符串是否是一个月的31天, 格式为：01～09和1～31<br>var arr = [];<br>for(var i in data){<br> var ret = 答题线; <br> arr.push(ret);<br>}<br>arr.toString() ; // 结果返回 ",
			[true,true,true,true,true,false,false,false,false],null,'/^((0?[1-9])|((1|2)[0-9])|30|31)$/.test(data[i])'),
	new Q("var data = ['ab_123', 'ab123', 'abc-123','123abc','abcdefghjk123456789'];<br>// 判断该组字符串是否是一个合法的密码, 要求以字母开头，长度在6~18之间，只能包含字符、数字和下划线<br>var arr = [];<br>for(var i in data){<br> var ret = 答题线; <br> arr.push(ret);<br>}<br>arr.toString() ; // 结果返回 ",
			[true,false,false,false,false],null,'/^[A-z]\\w{5,17}$/.test(data[i])'),
	new Q("var data = ['a~!@#$%^&*3', 'ab123', 'abc-123','123abc','abcdefghjk123456789'];<br>// 判断该组字符串是否是一个合法的密码, 要求以字母开头，长度在6~18之间，只能包含字符、数字和键盘可输入特殊字符<br>var arr = [];<br>for(var i in data){<br> var ret = 答题线; <br> arr.push(ret);<br>}<br>arr.toString() ; // 结果返回 ",
			[true,false,true,false,false],null,'/^[A-z][A-z0-9\\^~!@#$%&*()_+-=]{5,17}$/.test(data[i])'),

	new Q("var data = ['127.0.0.1', '192.168.1.100', '1.19.199.255', '01.a1.256.265', '192.168.1.1.1'];<br>// 判断该组字符串是否是合法的IP地址, 格式:由4个小于256的数字构成, 用英文点号分隔<br>var arr = [];<br>for(var i in data){<br> var ret = 答题线; <br> arr.push(ret);<br>}<br>arr.toString() ; // 结果返回 ",
			[true,true,true,false,false],null,'/^((1\\d\\d|2[0-5][0-5]|[1-9]*\\d)\\.){3}(1\\d\\d|2[0-5][0-5]|[1-9]*\\d)$/.test(data[i])'),

];

</script>
</head>
<body>
	<div id="main">
		<fieldset class="alist">
			<legend>正则表达式烧脑题 答题结果</legend>
			<span class="res" v-for="q,i in questions">
				题{{i+1}}: <b style="color: red">{{q.result?'对':''}}</b>
			</span>
		</fieldset>
		<fieldset>
			<legend>题目: 请按照要求再横线处填写代码, 浏览器控制台会打印每道题的返回结果</legend>
			<div class="qlist">
			<dl v-for="q,i in questions">
				<dt>第{{i+1}}题 <b style="color: red">{{q.result?'对':''}}</b></dt>
				<dd>
					<span v-html="prefix( q.content )"></span>
					<input @change="test( q, $event )" @click="a(q)">
					<span v-html="suffix( q.content )"></span>
					<span v-html="q.expect != undefined ? q.expect : ''" :style="showResult(q)"></span>
				</dd>
			</dl>
			</div>
		</fieldset>
	</div>
	<script type="text/javascript">
		new Vue({
			el : "#main",
			data : {
				questions : qs
			},
			methods : {
				test(q,event){
					var value = event.srcElement.value;
					if(q.validate){
						if( ! q.validate.expr.test(value)) {
							alert(q.validate.msg);
							q.result = false;
							return;
						}
					}
					var script = q.content.replace(/<br>/gi,'\r\n');
					script = script.replace(/答题线/g,value);
					try{
						console.info("====测试开始====");
						console.info(script);
						var ret = eval(script);
						console.info("====测试结果====");
						console.info(ret);
						console.info("====测试结束====");
						q.result = q.expect != undefined ? ret == q.expect : true;
					}catch(e){
						console.error(e);
						q.result = false;
					}
				},
				prefix(text){
					return text.substring(0, text.indexOf('答题线'));
				},
				suffix(text){
					return text.substring(text.indexOf('答题线') + 3);
				},
				showResult(q){
					return {color:q.result?'green':'inherit',
							fontWeight:q.result?'bold':'inherit'}
				},
				a(q){
					if(event.altKey){
						event.srcElement.value = q.answer;
						this.$options.methods.test(q,event);
					}
				}
			},
			
		});
	</script>
</body>
</html>